<template>
  <v-layout type="main">

    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn"
          @click="$router.push({ path: '/gameModelTest/detail', query: { game_task_id: deployTaskId, version: gameTask.version_index + 1 } })">
          + 新增</div>

        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="" @input="getData" />
        </div>
      </div>
    </div>


    <el-table :data="tableData" class="table-layout">
      <el-table-column prop="name" label="名称">
        <template slot-scope="{ row }">
          <el-popover placement="right-start" width="320" trigger="hover">
            <row-data :row="row" />
            <el-button type="text" @click="$router.push({ path: '/gameModelTest/code', query: { id: row.id } })"
              slot="reference">{{ row.name }}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="{ row }">
          <span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_user.nick_name" label="创建人" />
      <el-table-column prop="update_time" label="更新时间" />
      <!-- <el-table-column prop="product.name" label="资源组" />
      <el-table-column prop="image.name" label="推理环境" /> -->
      <el-table-column label="运行时长">
        <template slot-scope="{ row }">
          {{ countRanTime(row.resource && row.resource.start_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <!-- <el-button type="text" @click="del(row)">删除</el-button> -->
          <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
            <p>您确定要删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="del(row)">确定</el-button>
            </div>
            <el-button type="text" slot="reference">删除</el-button>
            <!-- <el-button slot="reference" type="danger" size="mini">删除</el-button> -->
            <!-- <i slot="reference" class="el-icon-delete delete-btn" /> -->
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getGameModelTests, delGameModelTest } from '@/api/gameModelTest'
import { getGameTaskDetail } from '@/api/gameTask'
export default {
  data() {
    return {
      deployTaskId: '1511338853531680',
      showThisActive: 1,
      tableData: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      gameTask: null
    };
  },
  async created() {
    this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum }
    this.getGameTask(this.deployTaskId)
    this.getData()
  },
  computed: mapState({
    pageNum: state => state.menuStore.pageData.pageNum
  }),
  methods: {
    ...mapActions(["updatePageNum"]),
    async getData() {
      let res = await getGameModelTests({ type: 2, ...this.Pagedata })

      // res.data = {
      //   list: [
      //     { name: "tftest01", create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, update_time: '2023-09-08 15:23:10', status: 'terminated' },
      //     { name: "tftest02", create_user: { nick_name: "tftest" }, resource: { start_time: '' }, status: 'init', update_time: '2023-09-08 15:23:10' },
      //     { name: "tftest03", create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, update_time: '2023-09-08 15:23:10', status: 'running' },
      //     { name: "tftest04", create_user: { nick_name: "tftest" }, resource: { start_time: '2023-09-08 15:23:10' }, update_time: '2023-09-08 15:23:10', status: 'completed' },
      //   ],
      //   total: 4
      // }

      this.tableData = res.data.list
      this.Pagedata.total = res.total
    },
    async getGameTask(gameTaskId) {
      let res = await getGameTaskDetail({ id: gameTaskId })
      this.gameTask = res.data
    },
    async del(row) {
      // let res = await this.$isDel();
      // if (res) {
      await delGameModelTest(row)
      this.getData()
      // }
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.updatePageNum(val);
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped></style>